<template>
  <div class="activity-status-tag activity-status-tag-offline" :style="{
    borderColor: color
  }">
    <div class="activity-status-tag-text" :style="{
      color: color
    }">{{ tag }}</div>
  </div>

</template>
<script lang="ts" setup>
const props = defineProps<{
  tag: number| string
}>();
const color = computed(() => {
  switch (props.tag) {
    case '线上直播':
      return '#2951E0'
    case '线下沙龙':
      return '#088F4E'
    case '创新大赛':
      return '#8A25D9'
    default:
      return '#ED5F22'
  }
})
</script>
<style lang="scss" scoped>
.activity-status-tag {
  font-size: 14px;
  font-weight: 400;
  border-radius: 12px;
  display: inline-flex;
  height: 24px;
  &-text {
    line-height: 24px;
    margin: 0 4px;
    display: flex;
    align-items: center;
  }
  &-online {
    border: 1px solid #DBE2FA;
    color: #2951E0;
     &-icon {
      padding: 2px 4px;
      background: #DBE2FA;
    }
  }
  &-offline {
    border-radius: 12px;
    border: 1px solid #D6ECE2;
    color: #088F4E;
    &-icon {
      padding: 2px 4px;
      background: #D6ECE2;
    }
  }
}
</style>